<template>
	<view class="wf-item-page" >
		<navigator url="../../pages/product/product">
			<image :src="item.images[0]" mode="widthFix" class="item-img" />
			<view class="info-pname">{{item.title}}</view>
		</navigator>		
		<view class="item-info">
			<navigator url="../../pages/product/product" class="left">
				<image :src="item.avatar" mode="widthFix" class="info-avatar" />
				<view class="info-nickname">{{item.nickname}}</view>
			</navigator>
			<view class="right" @click="change">
				<text :class="'iconfont '+(item.checked?'icon-1_music90':'icon-1_music89')"></text>
				<text>{{item.goodcount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				require:true
			}
		},
		data() {
			return {
				collect:false				
			}
		},
		methods: {
			//是否取消点赞
			change(){
				this.collect=!this.collect
				if(this.collect)
					this.item.goodcount=Number(this.item.goodcount)+1
				else
					this.item.goodcount=Number(this.item.goodcount)-1
			}
		}
	}
</script>

<style  lang="scss">
@import '../../pages/find/uni.scss';
	.wf-item-page{
		background: #fff;
		overflow: hidden;
		border-radius: 5px;
	}
	
	.item-img{
		width: 100%;
	}
	
	.item-info{
		display: flex;
		align-items: center;
		padding: 5px 20rpx 20rpx;
		justify-content: space-between;
	}
	.item-info .left{
		display: flex;
		height: 45rpx;
		line-height: 45rpx;
		width: 70%;
	}
	.info-avatar{
		width: 40rpx;
		padding-right: 10rpx;
		border-radius: 50%;
	}
	
	.info-nickname{
		font-size: 12px;
		color: #333;
		width: 60%;
		overflow: hidden;
	}
	.right{
		font-weight: bold;
		line-height: 40rpx;
		font-size: 27rpx;
		color: #2d2d2d;
	}
	.iconfont{
		color: #2f2f2f;
		font-size: 40rpx;
		padding-right: 5rpx;
		position: relative;
		top: 6rpx;
	}
	.icon-1_music90{
		color: #ff3546;
	}
	.info-pname{
		font-weight: bold;
		padding: 20rpx;
	}
</style>
